<template>
  <div class="flex align-center is-justify-center load-wrapper" style="height: 100%">
    <div class="sk-cube-grid" :style="{ width: `${size}px`, height: `${size}px`, margin: `${margin}`,...containerStyle }">
      <div v-for="(cube, index) in 9" :key="index" class="sk-cube" :class="`sk-cube${index + 1}`" :style="{backgroundColor: theme, ...cubeStyle}"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
const settingsStore = useSettingsStore()
import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from "@/store/modules/settings.js";
const theme = computed(() => settingsStore.theme);
// 定义组件属性（支持自定义）
const props = defineProps({
  /** 加载动画尺寸（宽高），默认40px */
  size: {
    type: Number,
    default: 40
  },
  /** 立方体颜色，默认#333 */
  color: {
    type: String,
    default: '#333'
  },
  /** 动画周期时长（秒），默认1.3s */
  duration: {
    type: Number,
    default: 1.3
  },
  /** 容器外边距，默认"100px auto" */
  margin: {
    type: String,
    default: '100px auto'
  },
  /** 自定义容器样式（对象形式），如 { position: 'absolute', top: '50%' } */
  containerStyle: {
    type: Object,
    default: () => ({})
  },
  /** 自定义立方体样式（对象形式），如 { borderRadius: '2px' } */
  cubeStyle: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped>
/* 基础样式 - 保留原动画逻辑，动态部分通过 props 注入 */
.sk-cube-grid {
  /* 尺寸由 props.size 控制，此处不固定 */
  display: inline-block; /* 避免容器占满一行 */
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  float: left;
  /* 动画名称和时长通过动态样式注入 */
  animation: sk-cubeGridScaleDelay var(--duration, 1.3s) infinite ease-in-out;
  -webkit-animation: sk-cubeGridScaleDelay var(--duration, 1.3s) infinite ease-in-out;
}

/* 9个立方体的动画延迟 - 保持原逻辑 */
.sk-cube-grid .sk-cube1 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { animation-delay: 0s; -webkit-animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }

/* 核心动画逻辑 - 保持原效果 */
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  } 35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  } 35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
}

/* 通过 :root 变量接收动画时长（由 props 动态设置） */
:root {
  --duration: v-bind(duration + 's'); /* 将 props.duration 转为秒 */
}
.load-wrapper{
   background-color: #00000099;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>
